{% extends 'base.html' %}
{% load static %}
{% block title %}
    博客首页
{% endblock %}


{% block banner %}
    <div class="banner">
        <div class="cont w1000">
            <div class="title">
                <h3>MY<br/>BLOG</h3>
                <h4>笨鸟先飞</h4>
            </div>
            <div class="amount">
                <p><span class="text">访问量</span><span class="access">{{ visit_total }}</span></p>
                <p><span class="text">日&nbsp;&nbsp;志</span><span class="daily-record">{{ article_total }}</span></p>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="content">
        <div class="cont w1000">
            <div class="title">
					<span class="layui-breadcrumb" lay-separator="|">
                        <a href="?article_category_id="
                           class="{% if article_category_id == '' %}active{% endif %}">全部</a>
						<a href="?article_category_id=4" class="{% if article_category_id == '4' %}active{% endif %}">旅游杂记</a>
						<a href="?article_category_id=2" class="{% if article_category_id == '2' %}active{% endif %}">Django文章</a>
						<a href="?article_category_id=1" class="{% if article_category_id == '1' %}active{% endif %}">前端文章</a>
						<a href="?article_category_id=3"
                           class="{% if article_category_id == '3' %}active{% endif %}">心情</a>
						<a href="?article_category_id=6" class="{% if article_category_id == '6' %}active{% endif %}">Python文章</a>
					</span>
            </div>
            <div class="list-item">
                {% for article in article_page.object_list %}
                    <div class="item">
                        <div class="layui-fluid">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                                    <div class="img"><img src="{{ article.img.url }}" alt=""></div>
                                </div>
                                <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                                    <div class="item-cont">
                                        <h3>{{ article.title }}
                                            {% if article.is_new %}
                                                <button class="layui-btn layui-btn-danger new-icon">new</button>
                                            {% endif %}
                                        </h3>
                                        <h5>{{ article.category }}</h5>
                                        <p>{% if article.excerpt %}{{ article.excerpt }}{% else %}
                                            {{ article.body|truncatewords:20 }}{% endif %}</p>
                                        <a href="details.html" class="go-icon"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}

            </div>
            {#            <div id="demo" style="text-align: center;"></div>#}
            <div class="pageturn">
                <ul class="pagelist">
                    {% if article_page.has_previous %}
                        <li class="long"><a href="?{{ article_page.previous_page_number.querystring }}">上一页</a></li>
                    {% endif %}
                    {% for page in article_page.pages %}
                        {% if page %}
                            {% ifequal page article_page.number %}
                                <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                            {% else %}
                                <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                            {% endifequal %}
                        {% else %}
                            <li class="none">...</li>
                        {% endif %}
                    {% endfor %}
                    {% if article_page.has_next %}
                        <li class="long"><a href="?{{ article_page.next_page_number.querystring }}">下一页</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        layui.config({
            base: '{% static '/res/js/util/' %}'
        }).use(['element', 'laypage', 'jquery', 'menu'], function () {
            element = layui.element, laypage = layui.laypage, $ = layui.$, menu = layui.menu;
            laypage.render({
                elem: 'demo',
                count: {{ article_total }}, //数据总数，从服务端得到
            });
            menu.init();
        })
    </script>
{% endblock %}

